<caltech-header title="Quote" page="pageCount">
    <h3>CALIBRATION QUOTE</h3>
    <h5 class="visible-print"><span>Quote No. {{model.quoteNumber}}</span> - <span>Date: {{model.quoteDate | date: 'dd/MMM/yyyy'}}</span></h5>
</caltech-header>

<div class="page-quote-item">
    <div class="row">
        <div class="col-xs-7">
            <div class="row">
                <div class="col-xs-3">
                    <label>Customer:</label>
                </div>
                <div class="col-xs-9">
                    <a href="#" class="editable-wrap" e-typeahead="customer as customer.name for customer in getCustomerList($viewValue)" e-typeahead-editable="false"
                       onaftersave="updateCustomer($data)" editable-text="model.company.name" buttons="no" blur="submit"><strong>{{model.company.name}}</strong></a>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-3">
                    <label>Address:</label>
                </div>
                <div class="col-xs-9">
                    <!--<span editable-text="model.company.address" buttons="no" blur="submit">{{model.company.address}}</span>-->
                    <span class="form-control-static">
                        {{model.company.address}}
                        <span ng-if="model.company.city">, {{model.company.city}}</span>
                        <span ng-if="model.company.state">, {{model.company.state}}</span>
                        <span ng-if="model.company.country">, {{model.company.country}}</span>
                    </span>
                </div>
            </div>
        </div>
        <div class="col-xs-5">
            <div class="row hidden-print">
                <div class="col-xs-3" ng-show="model.quoteNumber">
                    <label style="white-space:nowrap;">KLC Quote #:</label>
                </div>
                <div class="col-xs-9" ng-show="model.quoteNumber"><strong class="form-control-static">{{model.quoteNumber}}</strong></div>
            </div>
            <div class="row hidden-print">
                <div class="col-xs-3">
                    <label>Quote date:</label>
                </div>
                <div class="col-xs-9">
                    <a href="#" e-datepicker-popup="dd/MMM/yyyy" e-class="form-control" editable-bsdate="model.quoteDate" buttons="no" blur="submit">{{model.quoteDate | date: 'dd/MMM/yyyy'}}</a>
                </div>
            </div>
            <div class="row visible-print">
                <div class="col-xs-12">
                    <strong>KIM LONG SURVEY JSC (KLC)</strong>
                    <div><small>86 Xuan Thuy St, Thao Dien Ward, Dist. 2, HCM City, VN</small></div>
                    <div>
                        <small>Tel: +84 (8) 6281.8479 - Fax: +84 (8) 6281.8481</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-7">
            <div class="row">
                <div class="col-xs-3">
                    <label>Contact:</label>
                </div>
                <div class="col-xs-9">
                    <span class="form-control-static">{{model.company.contactPersonName}}</span>
                </div>
            </div>
        </div>
        <div class="col-xs-5">
            <div class="row">
                <div class="col-xs-3">
                    <label>Sales man:</label>
                </div>
                <div class="col-xs-9">
                    <span class="form-control-static">{{model.salesman.fullName}}</span>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-7">
            <div class="row">
                <div class="col-xs-3">
                    <label>Phone:</label>
                </div>
                <div class="col-xs-9">
                    <span class="form-control-static">{{model.company.tel}}</span>
                </div>
            </div>
        </div>
        <div class="col-xs-5">
            <div class="row">
                <div class="col-xs-3">
                    <label>Phone:</label>
                </div>
                <div class="col-xs-9">
                    <span class="form-control-static">{{model.salesman.tel}}</span>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-7">
            <div class="row">
                <div class="col-xs-3">
                    <label>Mobile:</label>
                </div>
                <div class="col-xs-9">
                    <span class="form-control-static">{{model.company.mobile}}</span>
                </div>
            </div>
        </div>
        <div class="col-xs-5">
            <div class="row">
                <div class="col-xs-3">
                    <label>Mobile:</label>
                </div>
                <div class="col-xs-9">
                    <span class="form-control-static">{{model.salesman.mobile}}</span>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-7">
            <div class="row">
                <div class="col-xs-3">
                    <label>Email:</label>
                </div>
                <div class="col-xs-9">
                    <span class="form-control-static">{{model.company.email}}</span>
                </div>
            </div>
        </div>
        <div class="col-xs-5">
            <div class="row">
                <div class="col-xs-3">
                    <label>Email:</label>
                </div>
                <div class="col-xs-9">
                    <span class="form-control-static">{{model.salesman.email}}</span>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/ng-template" id="customTemplate.html">
    <a style="width: 500px; display: block;">
        <div class="row">
            <div class="col-xs-6">{{match.model.modelNumber}}</div>
            <div class="col-xs-6">{{match.model.manufacturer}}</div>
        </div>
    </a>
</script>

<table class="table">
    <thead>
        <tr>
            <th class="visible-print" style="width: 1%;">#</th>
            <th class="col-xs-2">Description</th>
            <th class="col-xs-2">Model</th>
            <th class="col-xs-2">Manufacturer</th>
            <th class="col-xs-2">Range</th>
            <th class="col-xs-1">Service at</th>
            <th class="col-xs-1 text-center quantity">Qty</th>
            <th class="col-xs-1 text-right col-min-print">Unit Price</th>
            <th class="col-xs-1 text-right">Amount</th>
            <th class="col-xs-1 hidden-print"></th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in model.items">
            <td class="visible-print">
                <span class="form-control-static">{{$index + 1}}</span>
            </td>
            <td><span class="form-control-static">{{item.name}}</span></td>
            <td>
                <span ng-disabled="!model.company.id" e-typeahead-editable="false" e-typeahead-on-select="updateQuoteItem($item, item)" e-typeahead="equipment as equipment.modelNumber for equipment in getEquipmentList($viewValue)"
                      editable-text="item.modelNumber" e-name="modelNumber" e-form="rowform" e-required class="form-control-static" typeahead-template-url="customTemplate.html">
                    {{item.modelNumberName}}
                </span>
            </td>
            <td><span class="form-control-static">{{item.manufacturer}}</span></td>
            <td><span class="form-control-static">{{item.description}}</span></td>
            <td>
                <span editable-select="item.servicePlace" e-name="servicePlace" e-form="rowform" e-ng-options="s.value as s.text for s in servicePlaces" e-required class="form-control-static">
                    {{showServicePlaces(item.servicePlace)}}
                </span>
            </td>
            <td>
                <span editable-number="item.quantity" e-name="quantity" e-form="rowform" e-min="1" e-required class="text-center form-control-static" e-class="text-center">
                    {{item.quantity | number}}
                </span>
            </td>
            <td>
                <span editable-number="item.unitPrice" e-name="unitPrice" e-form="rowform" e-min="0" e-required class="text-right form-control-static" e-class="text-right">
                    {{item.unitPrice | number}}
                </span>
            </td>
            <td>
                <span class="form-control-static text-right">{{(item.unitPrice * item.quantity) | number}}</span>
            </td>

            <td class="hidden-print text-right" style="white-space:nowrap;">
                <form editable-form name="rowform" ng-show="rowform.$visible" class="form-buttons form-inline">
                    <button type="submit" ng-disabled="rowform.$waiting || rowform.$invalid" class="btn btn-primary btn-sm"><b class="glyphicon glyphicon-ok"></b></button>
                    <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default btn-sm"><b class="glyphicon glyphicon-remove"></b></button>
                </form>
                <button ng-show="!rowform.$visible" class="btn btn-primary btn-sm" ng-click="rowform.$show()"><b class="glyphicon glyphicon-edit"></b></button>
                <button ng-show="!rowform.$visible" class="btn btn-danger btn-sm" ng-click="removeRow($index)"><b class="glyphicon glyphicon-trash"></b></button>
            </td>
        </tr>
        <tr class="hidden-print">
            <td><span class="form-control-static">{{newRow.name}}</span></td>
            <td>
                <input form="newRowForm" name="modelNumber" ng-model="newRow.modelNumber" type="text" class="form-control" required typeahead-template-url="customTemplate.html"
                       typeahead-editable="false" typeahead-on-select="updateQuoteItem($item, newRow)" typeahead="equipment as equipment.modelNumber for equipment in getEquipmentList($viewValue)" />
            </td>
            <td><span class="form-control-static">{{newRow.manufacturer}}</span></td>
            <td><span class="form-control-static">{{newRow.description}}</span></td>
            <td>
                <select form="newRowForm" name="servicePlace" ng-options="s.value as s.text for s in servicePlaces" class="editable-input form-control ng-pristine ng-valid" ng-model="newRow.servicePlace" required>
                    {{showServicePlaces(newRow.servicePlace)}}
                </select>
            </td>
            <td><input form="newRowForm" name="quantity" ng-model="newRow.quantity" min="1" type="number" class="form-control text-center" required /></td>
            <td><input form="newRowForm" name="unitPrice" ng-model="newRow.unitPrice" min="0" type="number" class="form-control text-right" required /></td>
            <td><span class="form-control-static text-right">{{(newRow.unitPrice * newRow.quantity) | number}}</span></td>
            <td class="text-right">
                <form name="newRowForm" id="newRowForm" novalidate>
                    <input form="newRowForm" name="poNumber" ng-model="newRow.modelNumber" hidden type="text" class="form-control" required />
                    <input form="newRowForm" name="quantity" ng-model="newRow.quantity" type="number" min="1" hidden class="form-control" required />
                    <input form="newRowForm" name="unitPrice" ng-model="newRow.unitPrice" type="number" min="0" hidden class="form-control" required />
                    <button class="btn btn-primary btn-sm" ng-click="addRow(newRow)" ng-disabled="newRowForm.$invalid"><b class="glyphicon glyphicon-plus"></b></button>
                </form>
            </td>
        </tr>
        <tr>
            <td colspan="8" class="text-right"><strong class="form-control-static">Transportation/Shipping/Delivery/Onsite Service Charges</strong></td>
            <td>
                <a href="#" editable-number="model.serviceCharges" e-min="0" e-step="100" buttons="no" blur="submit" class="text-right" e-class="text-right">
                    {{model.serviceCharges | number}}
                </a>
            </td>
            <td class="hidden-print"></td>
        </tr>
        <tr>
            <td colspan="6" class="text-right"><strong class="form-control-static">Total units</strong></td>
            <td class="text-center">
                <span class="form-control-static">{{totalAmount | number}}</span>
            </td>
            <td class="text-right"><strong class="form-control-static">SubTotal</strong></td>
            <td class="text-right">
                <span class="form-control-static">{{totalPrice | number}}</span>
            </td>
            <td class="hidden-print"></td>
        </tr>
        <tr class="hidden-print" style="display:none;">
            <td colspan="7" class="text-right"><strong class="form-control-static">Tax</strong></td>
            <td>
                <a href="#" editable-number="model.tax" e-min="0" e-step="1" buttons="no" blur="submit" class="text-right" e-class="text-right">
                    {{model.tax | number}}%
                </a>
            </td>
            <td class="hidden-print"></td>
        </tr>
        <tr>
            <td colspan="6" class="text-right"><strong class="form-control-static"></strong></td>
            <td class="text-center">
                <a href="#" editable-number="model.vat" e-min="0" e-step="1" buttons="no" blur="submit" class="text-right" e-class="text-right">
                    {{model.vat | number:2}}%
                </a>
            </td>
            <td class="text-right"><strong class="form-control-static">VAT</strong></td>
            <td class="text-right">
                <span class="form-control-static">{{totalVat | number}}</span>
            </td>
            <td class="hidden-print"></td>
        </tr>
        <tr>
            <td colspan="8" class="text-right"><strong class="form-control-static grand-total">Total(VND)</strong></td>
            <td class="text-right">
                <strong class="form-control-static">{{grandTotal | number:0}}</strong>
            </td>
            <td class="hidden-print"></td>
        </tr>
        <tr>
            <td colspan="6" class="text-right"><strong class="form-control-static">Exchange rate USD</strong></td>
            <td class="text-center">
                <a class="exchange-rate" href="#" editable-number="model.exchangeRate" e-min="0" e-step="10" buttons="no" blur="submit">{{model.exchangeRate | number}}</a>
            </td>
            <td class="text-right"><strong class="form-control-static grand-total">Total(USD)</strong></td>
            <td class="text-right">
                <strong class="form-control-static">{{grandTotal2 | number}}</strong>
            </td>
            <td class="hidden-print"></td>
        </tr>
        <tr class="hidden-print">
            <td class="text-left"><strong class="form-control-static">Notes:</strong></td>
            <td class="text-left" colspan="8">
                <div>
                    <span editable-text="model.note" buttons="no" blur="submit">{{model.note}}</span>
                </div>
            </td>            
            <td class="hidden-print"></td>
        </tr>
        <tr class="hidden-print">
            <td class="text-left"><strong class="form-control-static">Sales Manager:</strong></td>
            <td class="text-center" colspan="2">
                <strong class="form-control-static grand-total" ng-if="model.showFullName && !model.managerId">{{user.fullName}}</strong>
                <strong class="form-control-static grand-total" ng-if="model.showFullName && model.managerId">{{model.manager.fullName}}</strong>
            </td>
            <td class="text-left">
                <input type="checkbox" ng-click="model.showFullName=!model.showFullName;" ng-model="model.showFullName" class="hidden-print" has-role="Admin,Management(BGD),SalesManager">
            </td>
            <td colspan="4"></td>
            <td class="hidden-print"></td>
        </tr>
    </tbody>
</table>
<div class="hidden-print">
    <div class="row">
        <div class="col-xs-3">
            <label>Status:</label>
        </div>
        <div class="col-xs-3">
            <a href="#" e-ng-options="s.value as s.text for s in status" editable-select="model.status" buttons="no" blur="submit" e-name="status">
                {{showStatus(model.status)}}
            </a>
        </div>
    </div>
</div>
<div ng-if="pageCount > 1" style="page-break-before: always; height: 60px;"></div>


<div class="visible-print panelPrint">
    <!--<p class="quotePrintPtag"><strong><u>Note of Payment:</u></strong></p>
    <ul class="quotePrintULtag">
        <li>Price quote is NOT including VAT Tax * Quote valid for 30 days..</li>
        <li>Registered Invoice (Red Invoice) will be sent to customer after completion of calibration service.</li>
        <li>Payment term is 7 days by Cash or Bank Transfer after receiving Registered Invoice.</li>
    </ul>
    <p class="quotePrintPtag"><strong><u>Calibration Note:</u></strong></p>-->
    <ul style="list-style-type: none; margin-left: -40px !important; margin-bottom: 0px !important; ">
        <li>* Quote is valid for 30 days   * Price quote may or may not include VAT tax.</li>
    </ul>
    <ol class="quotePrintOLtag" style=" margin-left: -30px !important; ">
        <li><strong>Starting calibration service within 7 days after receiving PO or Confirm Order   * Complete calibration within 7 day(s) Onsite / At our Lab</strong></li>
        <li><strong>Free of charge if equipment is "Rejected" but still need to have Kim Long Certificate issued.</strong></li>
        <li><strong>Free of charge if Kim Long technician can adjust your equipment back to its "Tolerance".</strong></li>

        <li>
            <strong>Limitation of Liability:</strong>
            <ul style="list-style-type:none;">
                <li>4.1   Kim Long liability here-under shall be limited to the repair, restoration, or replacement of equipment items to the condition in which they were received by Kim Long upon pickup and/or serviced at the Customers facility.</li>
                <li>4.2   In no event shall Kim Long be liable for any special, indirect, incidental, consequential or liquidated, penal or any economic loss damages of any character, including, but not limited to loss of the customer's property lost profits or lost production, whether claimed by the customer or by a third party, irrespective of whether claims or actions for such damages are based upon agreement, warranty, negligence, strict liability or otherwise.</li>
            </ul>
        </li>
    </ol>

    <table class="table table-bordered-none table-padding quotePrintTabletag">
        <tr style="border:none;">
            <td class="text-center borderNone"><strong style="text-decoration:underline;">CUSTOMER CONFIRM</strong></td>
            <td class="text-center borderNone"><strong style="text-decoration:underline;text-transform:uppercase;">Sales Manager: <span ng-if="model.showFullName">{{model.manager.fullName}}</span> </strong></td>
        </tr>
        <tr>
            <td style="width: 60%;" class="borderNone"></td>
            <td rowspan="4" class="text-center borderNone">
                <img src="../../../Content/images/sign.png" style="width: 40%;" />
            </td>
        </tr>
        <tr><td class="borderTopNone">Signature:</td></tr>
        <tr><td class="borderTopNone">Name:</td></tr>
        <tr><td class="borderTopNone">Title:</td></tr>
    </table>
</div>

<!--<page-footer page="pageCount" standard="KQ-230.1 - Form Date: Jan/2014">
</page-footer>-->

<nav class="navbar navbar-default navbar-fixed-bottom navbar-inverse" role="navigation">
    <div class="container">
        <button class="btn btn-info navbar-btn" ng-click="back()">Back</button>
        <button class="btn btn-warning navbar-btn pull-right" has-access="QuoteDelete" busy-click="remove(model)" success="Deleted successfully" ng-show="model.id != undefined">Delete</button>
        <button class="btn btn-info navbar-btn" has-access="QuoteCreate" ng-show="model.id != undefined" ng-click="copy()">Copy</button>
        <button class="btn btn-info navbar-btn" has-access="QuoteEdit" ng-show="model.id != undefined" busy-click="update(model)" success="Updated successfully">Update</button>
        <button class="btn btn-info navbar-btn" has-access="QuoteCreate" ng-hide="model.id != undefined" busy-click="save(model)" success="Created successfully">Save</button>
        <button class="btn btn-info navbar-btn" ng-show="model.id != undefined" ng-click="doPrint()"><i class="glyphicon glyphicon-print"></i>&nbsp;Print</button>
        <button class="btn btn-primary navbar-btn" has-access="QuoteCreate" ng-if="model.id != undefined" busy-click="createPO(model.id)">Create PO</button>
    </div>
</nav>
